<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>请假页面</title>
		<link rel="stylesheet" type="text/css" href="css/qingjia.css">
		<script src="js/vue.js"></script>
		<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
	</head>
	<body>
		
		<div id="container" >
			<div id="menu">
				
				<div class="menu-level-0"><a href="qingjia.html">请假申请</a></div>
				<div class="menu-level-1">班级新增</div>
			</div>
			
			<div id="qingjia" class="clazz">
				
				<div id="qingjia-left">
					<!-- qingjia-left -->
				</div>
				<div id="qingjia-right">
					<!-- qingjia-right -->
					<div id="qingjia-right-top">
						<!-- qingjia-right-top -->
						
						<div id="qingjia-right-top-top">
							班级新增
						</div>
						<div id="qingjia-right-top-bottom">
							<span> 
								<div class="qingjia-right-top-bottom-time">名称：<input style="width:180px" type="text" id="name" v-model="name" /></div>
								<div class="qingjia-right-top-bottom-time">费用：<input style="width:180px" type="text" id="tuition" v-model="tuition" /></div>
							</span>
						</div>
						
					</div>
					<div id="qingjia-right-bottom">
						<!-- qingjia-right-bottom -->
						
						<input class="main-button" type="button" value="提交" v-on:click="add" />
						<input class="main-button" type="button" value="关闭" />
					</div> 
					
				</div>
				
			</div>
		</div>
	</body>
	<script>
		window.onload = function() {
			var vue = new Vue({
				el: '.clazz',
				data: {
					name:'',
					tuition:'',
				},
				methods: {
					add: function() {
						var url = 'http://localhost:8080/kaoqin/clazz/add';
						// url=发送请求的链接，和后端匹配
						// 第二个参数规定是对象：{元素名:元素}    要传给后台的数据
						// emulateJSON:false固定     是false还是true视实际情况更改
						this.$http.post(url, {
							name: this.name,
							tuition: this.tuition
						}, {
							emulateJSON: false
						}).then(function(backdatas) {
							console.log(backdatas);
						});
	
						window.location.href =
							"http://localhost:8080/kaoqin/banji.html";
	
					}
				}
			});
		};
	</script>
</html>
